<template>
    <div class="icon-text-container">
        <van-icon name="arrow-left" @click="returnMyView()" />
        <span class="text">修改昵称</span><span class="nav-right" @click="updateNameById()">保存</span>
    </div>
    <div class="wrapper">
        <br>
        <van-cell-group inset>
            <van-field v-model="name" :placeholder="route.query.name" />
        </van-cell-group>
        <span class="wrapper-notice">限2~12个中文、英文或数字</span>
    </div>
</template>

<script setup>
import http from '../../../utils/http';
import { useRouter, useRoute } from 'vue-router';
import { onMounted, ref, toRefs } from 'vue';
import { showDialog } from 'vant';


//数据处理区
const userId = localStorage.getItem("userId");
const name = ref();
const updateNameById = async () => {
    try {
        const response = await http.get(`/user/updateNameByUserId/${userId}`, {
            params: {
                name: name.value
            }
        });
        showDialog({
            message: '修改成功',
        }).then(() => {
            router.push('/personInfo')
        });
    }
    catch (error) {
        console.error(error);
    }
};

//编程路由区
const router = useRouter();
const route = useRoute();
function returnMyView() {
    router.push('/personInfo');
}

</script>

<style lang="scss" scoped>
.wrapper {
    background-color: #F4F4F4;
    width: 100vw;
    height: 617px;

    .wrapper-notice {
        font-size: 13px;
        color: #626262;
        margin-top: 30px;
        margin-left: 10px;
    }
}

//顶头一行的样式
.icon-text-container {
    display: flex;
    align-items: center;
    line-height: 50px;
    /* 调整垂直对齐 */
    font-size: 22px;

    /* 设置整体字体大小，图标和文字都会放大 */
    .nav-right {
        font-size: 16px;
        margin-left: 105px;
    }
}
//顶头图标与文字间距
.text {
    margin-left: 120px;
    /* 图标和文本之间的间距 */
}

::v-deep(.van-cell-group) {
    width: 375.2px;
    /* margin-bottom:-10px; */
    margin-left: -0px;
    border-radius: 0px;
}
</style>